<template>
  <div class="middle-now-con" :style="setbackgroundzh()">
    <div
      v-for="(item, index) in allList"
      :key="index + 99999"
      class="data-box box"
    >
      <div class="info-con-title">
        <p>{{ nowGrowthPhaseObject.growthPhaseName }}: {{ item.name }}</p>
        <!-- <i class="el-icon-caret-bottom"></i> -->
        <span class="details" @click="showDetail(item)">详情</span>
      </div>
      <div class="info-con-box">
        <div class="info-con-title-con">
          <!-- <div class="imgList">
            <img v-for="(pest, imgIndex) in item.pestImageList" :key="imgIndex" :src="'data:image/png;base64,' + pest.data" alt="" class="data-line" />
          </div> -->
          <div v-for="items,indexs in item.list" :key="indexs" class="font-con">
            <li v-if="items.featuresDescribe" :title="items.featuresDescribe">
              特征{{ indexs + 1 }}
            </li>
            <li v-if="items.pestName" :title="items.pestName">
              虫害名称：{{ items.pestName }}
            </li>
            <li v-if="items.diseaseName" :title="items.diseaseName">
              病害名称：{{ items.diseaseName }}
            </li>
            <li v-if="items.featuresDescribe" :title="items.featuresDescribe">
              特征描述：<br /> {{ items.featuresDescribe }}
            </li>
            <li v-if="items.proposalWork" :title="items.proposalWork">
              农事描述：<br /> {{ items.proposalWork }}
            </li>
            <li v-if="items.note" :title="items.note">
              注意事项描述：<br /> {{ items.note }}
              <!-- <span @click="showDetail(item)">详情</span> -->
            </li>
            <li v-if="items.pestDescribe" :title="items.pestDescribe">
              虫害描述：<br /> {{ items.pestDescribe }}
            </li>
            <li v-if="items.diseaseDescribe" :title="items.diseaseDescribe">
              病害描述：<br /> {{ items.diseaseDescribe }}
            </li>
            <li v-if="items.handle" :title="items.handle">
              建议处理方法：<br /> {{ items.handle }}
            </li>
          </div>
        </div>
      </div>
    </div>
    <!-- <div v-for="(item, index) in allList" :key="index" class="data-box box">
      <img :src="item.line" alt="" class="data-line" />
      <div class="info-con-box">
        <div class="info-con-title">
          <p :style="{ color: item.color }">{{ item.name }}</p>
          <i class="el-icon-caret-bottom" :style="{ color: item.color }"></i>
        </div>
        <div class="info-con-title-con">
          <div
            v-for="(kit, indexC) in item.list"
            :key="indexC"
            class="font-con"
          >
            <div
              class="font-con-title"
              :style="{
                background:
                  'url(' +
                  item.fontBack +
                  ')center center /100% 100% no-repeat',
                color: item.color,
              }"
            >
              {{ item.oneData }}{{ indexC + 1 }}
            </div>
            <li :title="kit.content">
              {{ kit.content }}
              <span @click="showDetail(kit)">详情</span>
            </li>
          </div>
        </div>
      </div>
    </div> -->
    <div class="plant">
      <img
        :src="
          nowGrowthPhaseObject.imgurl
            ? 'data:image/jpeg;base64,' + nowGrowthPhaseObject.imgurl
            : ''
        "
        alt=""
      />
      <p v-if="nowGrowthPhaseObject.growthPhaseName">{{ nowGrowthPhaseObject.growthPhaseName }}</p>
    </div>
    <DetailDialog
      ref="detailDialog"
      :detail-item="detailItem"
      :show.sync="detailShowDialog"
      @closeDialog="detailShowDialog = false"
    />
  </div>
</template>

<script>
import DetailDialog from "./components/detail-dialog";
import configurationApi from "@/api/digital-production/conservation-model/configuration/index";

export default {
  components: {
    DetailDialog
  },
  props: {
    batchNo: {
      type: [Number, String],
      default: ""
    },
    varietyNo: {
      type: [Number, String],
      default: ""
    },
    nowGrowthPhaseObject: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  data() {
    return {
      methodsList: [], // 常见病虫害及处理方法
      characteristicList: [], // 特征
      opinionList: [], // 农事指导建议
      detailShowDialog: false, // 详情
      allMethodsShowDialog: false,
      allList: [
        {
          name: "特征",
          list: [],
          oneData: "特征",
          color: "rgba(255, 141, 26, 1)",
          addImgIcon: require("@/assets/conservation-model/characteristic-add-btn1.png"),
          addImg: require("@/assets/conservation-model/characteristic-add-btn.png"),
          line: require("@/assets/conservation-model/characteristic-line.png"),
          fontBack: require("@/assets/conservation-model/characteristic-title.png"),
          type: "c",
          growthContentType: "GROWTHFEATURE"
        },
        {
          name: "常见虫害及处理方法",
          list: [],
          oneData: "建议",
          color: "rgba(92, 255, 157, 1)",
          addImgIcon: require("@/assets/conservation-model/opinion-add-btn1.png"),
          addImg: require("@/assets/conservation-model/opinion-add-btn.png"),
          line: require("@/assets/conservation-model/opinion-line.png"),
          fontBack: require("@/assets/conservation-model/opinion-title.png"),
          type: "o",
          growthContentType: "AGRICULTURALGUIDANCE"
        },
        {
          name: "常见病害及处理方法",
          list: [],
          oneData: "方法",
          color: "rgba(255, 235, 59, 1)",
          addImgIcon: require("@/assets/conservation-model/methods-add-btn1.png"),
          addImg: require("@/assets/conservation-model/methods-add-btn.png"),
          line: require("@/assets/conservation-model/methods-line.png"),
          fontBack: require("@/assets/conservation-model/methods-title.png"),
          type: "m",
          growthContentType: "PESTTREATMENT"
        }
      ],
      detailItem: {},
      nowPhaseNo: this.nowGrowthPhaseObject
        ? this.nowGrowthPhaseObject.growthPhaseNo
        : "",
      growthPhaseName: "",
      pestList: [],
      diseaseList: [],
      featuresList: []
    };
  },
  watch: {
    nowGrowthPhaseObject(v) {
      this.queryGrowthContent();
    }
  },
  created() {},
  mounted() {},
  methods: {
    // 根据批次id查询特征和建议还有方法
    async queryGrowthContent() {
      // 获取虫害
      const { data: pest } = await configurationApi.queryGrowthContent(
        this.nowGrowthPhaseObject.growthPhaseNo
      );
      pest.forEach((element) => {
        element.pestImageList = [];
        element.pestImageIdList.forEach(async (item) => {
          const { data: pestImg } = await configurationApi.pestImage(item);
          element.pestImageList.push(pestImg);
        });
      });
      this.pestList = pest;
      this.$set(this.allList[1], 'list', pest)
      // 获取病害
      const { data: disease } = await configurationApi.querydsContent(
        this.nowGrowthPhaseObject.growthPhaseNo
      );
      disease.forEach((element) => {
        element.diseaseImageList = [];
        element.diseaseImageIdList.forEach(async (item) => {
          const { data: diseaseImage } = await configurationApi.diseaseImage(
            item
          );
          element.diseaseImageList.push(diseaseImage);
        });
      });
      this.diseaseList = disease;
      this.$set(this.allList[2], 'list', disease)
      // 获取特征
      const { data: features } = await configurationApi.queryfeaturesContent(
        this.nowGrowthPhaseObject.growthPhaseNo
      );
      features.forEach((element) => {
        element.featuresImageIdList = [];
        element.featuresImageList.forEach(async (item) => {
          const { data: featuresImage } = await configurationApi.featuresImage(
            item
          );
          element.featuresImageIdList.push(featuresImage);
        });
        element.noteImageIdList = [];
        element.noteImageList.forEach(async (item) => {
          const { data: featuresImage } = await configurationApi.featuresImage(
            item
          );
          element.noteImageIdList.push(featuresImage);
        });
        element.workImageIdList = [];
        element.workImageList.forEach(async (item) => {
          const { data: featuresImage } = await configurationApi.featuresImage(
            item
          );
          element.workImageIdList.push(featuresImage);
        });
      });
      this.featuresList = features;
      this.$set(this.allList[0], 'list', features)

      // console.log(this.pestList, this.diseaseList, this.featuresList, this.allList);
    },
    showDetail(data) {
      this.detailItem = data;
      this.detailShowDialog = true;
    },
    closeDialog() {
      this.allMethodsShowDialog = false;
      this.queryGrowthContent();
    },

    // 设置背景图
    setbackgroundzh() {
      let farmingtypeid = sessionStorage.farmingTypeNo
      var backurl = ""
      switch (farmingtypeid) {
        case 'dt':
          backurl = require("@/assets/conservation-model/soil.png")
          break;
        case "dp":
          // 大棚种植
          backurl = require("@/assets/conservation-model/soil.png")
          break;
        case "xm":
          // 畜牧养殖
          backurl = require("@/assets/conservation-model/cm.png")
          // backurl = require("@/assets/oth-img/生态沟渠.png")
          break;
        case "sc":
          // 水产养殖
          backurl = require("@/assets/conservation-model/sc.png")
          break;
        case "gc":
          // 工厂养鱼
          backurl = require("@/assets/conservation-model/sc.png")
          break;
        default:
          // backurl = '@/assets/oth-img/big-fac.jpg'
          backurl = require("@/assets/conservation-model/soil.png")
          break;
      }
      // return require('@/assets/oth-img/big-fac.jpg')
      return 'background-image: url(' + backurl + ')'
    }
  }
};
</script>

<style lang="scss" scoped>
.middle-now-con {
  height: 100%;
  width: 100%;
  background: url("~@/assets/conservation-model/soil.png") center bottom
    no-repeat;
  background-size: 100% 60%;
  .plant {
    position: absolute;
    margin: 0 40%;
    bottom: 15%;
    width: 20%;
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    > img {
      position: absolute;
      max-width: 100%;
      max-height: 100%;
    }
    > p {

      position: absolute;
      bottom: -30px;
    }
  }
}
.box {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  height: 175px;
  width: 325px;
}
.data-box {
  border: 1px dashed #05e2b9;
  background-color: #01646a;
  position: relative;
  &:first-child {
    position: absolute;
    top: 50%;
    left: 2%;
    // background: url("~@/assets/conservation-model/characteristic-box.png");
    // background-size: 100% 100%;
    > .data-line {
      position: absolute;
      right: -110px;
    }
  }
  &:nth-child(2) {
    position: absolute;
    top: 24%;
    left: 66%;

    // background: url("~@/assets/conservation-model/opinion-box.png");
    // background-size: 100% 100%;
    > .data-line {
      position: absolute;
      left: -120px;
    }
  }
  &:nth-child(3) {
    position: absolute;
    top: 63%;
    left: 65%;
    // background: url("~@/assets/conservation-model/methods-box.png");
    // background-size: 100% 100%;
    > .data-line {
      position: absolute;
      left: -170px;
    }
  }
}

.btn-data {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  > img {
    cursor: pointer;
  }
  > p {
    font-size: 15px;
    font-weight: 700;
  }
}

.info-con-title {
  display: flex;
  width: calc(100% + 2px);
  position: absolute;
  left: -1px;
  top: -1px;
  // left: -1px;
  z-index: 12;
  align-items: center;
  height: 40px;
  border: 1px solid #05e2b9;
  background-color: #01646a;
  > p {
    padding: 0 10px;
  }

  span {
    padding: 5px;
    box-shadow: 0 0 10px inset rgb(240, 242, 245);
    cursor: pointer;
    &:hover {
      color: rgb(22, 116, 240);
      box-shadow: 0 0 10px inset rgb(22, 116, 240);
    }
  }

  .details {
    position: absolute;
    top: 3px;
    right: 3px;
  }
  // > img {
  //   padding: 0 10px;
  //   cursor: pointer;
  // }
}
.info-con-box {
  height: 100%;
  width: 100%;
  position: relative;
    overflow: hidden;
  // overflow-y: scroll;
  // overflow-x: hidden;
  .info-con-title-con {
    height: calc(100% - 40px);
    width: 100%;
    margin-top: 40px;

    overflow-y: scroll;
    // overflow: hidden;
    display: flex;
    position: relative;
    flex-direction: row;
    flex-wrap: wrap;
    padding: 10px;
    .imgList {
      width: 100%;
      height: 100%;
      overflow-y: scroll;

      img {
        width: 100%;
      }
    }
    .font-con {
      width: 100%;
      display: flex;
      align-items: flex-start;
      flex-direction: row;
      flex-wrap: wrap;
      overflow-x: hidden;
      .font-con-title {
        text-align: center;
        padding: 10px 20px;
        white-space: nowrap;
        width: 100%;
      }
      > li {
        width: 100%;
        list-style: none;
        word-wrap: break-word;
        word-break: normal;
        line-height: 25px;
        margin-bottom: 10px;
      }
    }
  }
}
</style>
